import React, { useEffect, useState } from 'react'
import instance from '../../request/axios';
import './index.css'
import { NavBar } from 'antd-mobile'
import { InfiniteScroll, List } from 'antd-mobile'
import { Dropdown, } from 'antd-mobile'
import { useNavigate } from 'react-router';
import { Area, Field } from 'react-vant';
import { areaList } from '@vant/area-data'
import { Button } from 'react-vant'
function index() {
    const [data, setData] = useState([]);
    const [currentPage, setcurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(0);
    const nav = useNavigate()
    useEffect(() => {
        instance.get('/api/date', {
            params: {
                currentPage,
                pageSize,
            }
        }).then((res: any) => {
            setData(res.data.data);
        })


    }, [])
    const back = () => {
        nav(-1)
    }

    const [hasMore, setHasMore] = useState(true)
    async function loadMore() {
        const res = await instance.get("/api/date", {
            params: {
                pageSize,
                currentPage,
            },
        });
        console.log(res);
        const { code} = res.data
        if (code === 200) {
            //修改页码+1
            setcurrentPage(currentPage +1)
            //合并数据
            setData(data.concat(res.data.data));
            //判断是否还有更多数据
            if (res.data.currentPage * res.data.pageSize >= res.data.total) {
                setHasMore(false); // 没有更多数据了
            }
        } else {
            setHasMore(false); // 没有更多数据了
        }
    }
    const [text, setText] = useState('');
    const Confirm = (val: any, option: any) => {
        setText(option[1].text)
        const addressfen = option[1].text;
        console.log(addressfen)
        instance.get('/api/city', {
            params: {
                address: addressfen
            }
        }).then((res) => {
            console.log(res);
            setData(res.data);
        })
    }

    const options = [
        {
            text: '全部',
            value: 'all',
        },
        {
            text: '教授医师',
            value: 'chief',
        },
        {
            text: '副主任医师',
            value: 'deputy',
        },
        {
            text: '主治医生',
            value: 'ettending'
        }
    ]
    const [selectedValue, setSelectedValue] = useState('全部');
    const handChange = (e: any) => {
        setSelectedValue(e.target.value)
    }

    const hangleClick = () => {
        console.log(selectedValue);
        if (selectedValue === '全部') {
            instance.get('/api/date?currentPage=' + currentPage + '&pageSize=' + pageSize + '').then((res: any) => {
                setTotal(res.data.total)
                setData(res.data.data);
                console.log(res.data.data);
                setPageSize(res.data.pageSize);
                setcurrentPage(res.data.currentPage)
            })
        }
        instance.get('/api/city', {
            params: {
                type: selectedValue,
                keshi: kesho
            }
        }).then((res) => {
            console.log(res);
            setData(res.data);
        })
    }

    const handleXq = (item: any) => {
        console.log(item);
        nav('/recommendeddoctorfind', {
            state: {
                data: item
            }
        })
    }
    const [kesho, setkesho] = useState('');
    const keshis = [
        {
            text: '全部',
            value: 'all',
        },
        {
            text: '小儿心内科',
            value: 'child',
        },
        {
            text: '中医肿瘤科',
            value: 'tumor',
        },
        {
            text: '中医科',
            value: 'yinyue'
        },
        {
            text: '全科医学科',
            value: 'allfind'
        },
        {
            text: '小儿皮肤科',
            value: 'childskin'
        },
        {
            text: '耳鼻咽喉科',
            value: 'ear'
        },
        {
            text: '肿瘤及防治科',
            value: 'tumorfind'
        },
        {
            text: '小儿外科',
            value: 'childfind'
        },
        {
            text: '小儿泌尿外科',
            value: 'childfindst'

        },
        {
            text: '精神心理科',
            value: 'spirit'
        },
        {
            text: '中医肛肠科',
            value: 'goutou'
        }
    ]

    const hangleClickFs = (e: any) => {
        setkesho(e.target.value);
        console.log(e.target.value);
    }

    return (
        <div className='homeBox'>
            <div className='homeHeader'>
                <NavBar onBack={back}>推荐专家</NavBar>
            </div>

            <div className='homeMain'>
                <Dropdown>
                    <Dropdown.Item key='sorter' title={
                        text ? text : '请选择'
                    } >
                        <div style={{ padding: 12 }} >
                            {/* 排序内容 */}
                            <Area
                                title='标题'
                                areaList={areaList}
                                columnsNum={2}
                                onChange={(val, options) => {
                                    console.log('selected value: ', val)
                                    console.log('selected option: ', options)
                                }}
                                onConfirm={(val, options) => {
                                    Confirm(val, options);
                                }}
                            />
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='bizop' title='筛选'>
                        <div>
                            {
                                options && options.map((item: any, index: number) => {
                                    return <label key={index}>
                                        <input type="radio"
                                            value={item.text}
                                            checked={selectedValue == item.text}
                                            onChange={handChange} />
                                        {item.text}
                                    </label>
                                })
                            }
                            <div>
                                {
                                    keshis && keshis.map((item: any, index: number) => {
                                        return <label key={index}>
                                            <input type="radio"
                                                value={item.text}
                                                checked={kesho == item.text}
                                                onChange={hangleClickFs} />
                                            {item.text}
                                        </label>
                                    })
                                }
                            </div>
                        </div>
                        <div className='buttonbtn'>
                            <Button type='default' >重置</Button>
                            <Button type='primary' onClick={hangleClick}>确定</Button>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item key='more' title='更多筛选'>
                        <div style={{ padding: 12 }}>
                            更多筛选内容
                            <br />
                            更多筛选内容
                            <br />
                        </div>
                    </Dropdown.Item>
                </Dropdown>
                <List>
                    <div>
                        {
                            data && data.map((item: any, index) => {
                                return <List.Item key={index}>
                                    <div className="doctor-info" onClick={() => handleXq(item)}>
                                        <img src={item.image} alt="医生图片" className="doctor-photo" />
                                        <div className="doctor-details">
                                            <div className="doctor-name">{item.name}

                                                <span className="ghs">可挂号</span></div>
                                            <div className="doctor-title">{item.type}</div>
                                            <div className="doctor-hospital">
                                                {item.hospital} {item.keshi}
                                            </div>

                                            <div className="doctor-ratings">
                                                擅长：儿童发育障碍、情绪障碍、多动症、抽动障碍、精神分裂症、情感障碍等常见精神疾病
                                            </div>
                                            <div className="doctor-consultation">
                                                <button className='yx'>优选医生</button>
                                                <button className='nd'>2届年度好大夫</button>
                                                <br />
                                                <span>
                                                    {item.service_list[0].name}{item.service_list[0].price}
                                                </span>
                                                <span>
                                                    {item.service_list[1].name}{item.service_list[1].price}
                                                </span>
                                                <span>
                                                    {item.service_list[2].name}{item.service_list[2].price}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </List.Item>
                            })
                        }
                    </div>
                </List>
                <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />

            </div>
        </div>
    )
}

export default index                